<template>
  <div id="ebookDetail">
    <com-head :opacity="1" :style="{background: background,color: color}"></com-head>
    <div class="ebookTop">
      <div class="sellwell">
        <div class="bookList">
          <div class="left">
            <img :src="book">
          </div>
          <div class="right">
            <p class="name">{{bookname}}</p>
            <p class="abstract">{{auth_name}}</p>
            <p class="pagenum">共{{number}}章</p>
          </div>
        </div>
      </div>
    </div>
    <div class="ebookmes">{{detail}}</div>
    <div class="backg">
      <div class="catalog">
        <div class="title"  @scoll="changeScorll()">
          <img src="../assets/image/catalog.png">&nbsp;目录&emsp;
          <span>共{{number}}章</span>
        </div>
        <div class="sellTop" @click="ebookContent(item.id)" v-for="item in showList" :key="item.id">
          <span>{{item.chapter_number + item.chapter_name}}</span>
          <img v-if="(item.is_book == '0')&&(item.chapter_price>0)" class="suo" src="../assets/image/suo.png">
        </div>
        <div @click="showAll = !showAll" class="more">
          {{word}}
          <i v-if="!showAll" class="iconfont icon-zhankai"/>
          <i v-else class="iconfont icon-shouqi"/>
        </div>
      </div>
      <div class="recommend">
        <div class="sellTop jiacu">
          <span>其他推荐</span>
        </div>
        <div class="bookList" @click="recommenddetail(item.id)" v-for="(item,index) in bookList" :key="index">
          <div class="left">
            <img :src="item.cover">
          </div>
          <div class="right">
            <div class="name">{{item.name}}</div>
            <div class="abstract">{{item.book_sign}}</div>
            <div class="pagenum">共{{item.number}}章</div>
          </div>
        </div>
      </div>
    </div>
    <div class="buyBtn">
      <div class="box" @click="collectinton">加入书架</div>
      <com-button :click="buySome">开始阅读</com-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ebookDetail",
  data() {
    return {
      background: "",
      color: "",
      book: '',
      bookname: "",
      pagenum: "",
      auth_name: "",
      number: "",
      id: "", //第一章id
      bookid: "", //书id
      detail: "",
      showAll: false, //标记数据是否需要完全显示的属性
      meslist: [],
      bookList: []
    };
  },

  computed: {
    showList: function() {
      if (this.showAll == false) {
        //当数据不需要完全显示的时候
        var showList = []; //定义一个空数组
        if (this.meslist.length > 3) {
          //这里我们先显示前三个
          for (var i = 0; i < 3; i++) {
            showList.push(this.meslist[i]);
          }
        } else {
          showList = this.meslist;
        }
        return showList; //返回当前数组
      } else {
        return this.meslist;
      }
    },
    word: function() {
      if (this.showAll == false) {
        //对文字进行处理
        return "展开全部";
      } else {
        return "收起";
      }
    }
  },

  created() {
    window.addEventListener('scroll', this.scrollChange, true)
  },

  mounted() {
    this.loading();
  },

  methods: {
    recommenddetail (id){
      this.axios
        .post("index/apidet", {
          book_id: id,
          token: this.token()
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.bookname = data.book.name;
            this.pagenum = data.book.strlen;
            this.auth_name = data.book.auth_name;
            this.book = data.book.cover;
            this.detail = data.book.book_sign;
            this.number = data.book.number;
            this.meslist = data.data;
            this.id = data.data[0].id;
            this.bookid = data.book.id;
            this.bookList = data.recom;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    scrollChange(e) {
      // console.log(window.scrollY);
      let scrollY = window.scrollY; //这样就是可以得到当前页面的滚动条的位置了;
      if(scrollY>0){
        this.background = `linear-gradient(to bottom, rgba(256,256,256,1),rgba(256,256,256,${scrollY/(100+scrollY)})`;
        this.color = "#222";
      } else {
        this.background = "rgba(256,256,256,0)";
        this.color = "white";
      }
    },
    loading() {
      this.axios
        .post("index/apidet", {
          book_id: this.$route.query.id,
          token: this.token()
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.bookname = data.book.name;
            this.pagenum = data.book.strlen;
            this.auth_name = data.book.auth_name;
            this.book = data.book.cover;
            this.detail = data.book.book_sign;
            this.number = data.book.number;
            this.meslist = data.data;
            this.id = data.data[0].id;
            this.bookid = data.book.id;
            this.bookList = data.recom;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 加入书架
    collectinton() {
      this.axios
        .post("index/apirack", {
          token: this.token(),
          bookrack_id: `${this.bookid},`
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.$bus.$emit("toast", data.msg);
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    ebookContent(id) {
      this.$router.push({
        name: "pageContent",
        query: { id: id, book_id: this.bookid, status: "0" }
      });
    },
    buySome() {
      this.$router.push({
        name: "pageContent",
        query: { id: this.id, book_id: this.bookid, status: "0" }
      });
    }
  }
};
</script>
<style lang='scss'>
#ebookDetail {
  background-color: #fff;
  padding-top: 0px;
  box-sizing: border-box;
  #pageHead {
    color: white;
    box-shadow: none;
    .icon-fanhui {
      // display: none;
      // color: white;
    }
  }
  .sellTop {
    display: flex;
    color: #555555;
    justify-content: flex-start;
    align-content: center;
    line-height: 60px;
    position: relative;
    .suo {
      width: 25px;
      height: 30px;
      position: absolute;
      bottom: 5px;
      right: 0px;
    }
    span {
      color: #555;
    }
    span:nth-of-type(1) {
      margin-left: 10px;
    }
    span:nth-of-type(2) {
      margin-left: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    &:after {
      content: "";
      height: 25px;
      width: 4px;
      background: #ec0202;
      position: absolute;
      left: -3px;
      top: 20px;
    }
  }
  .ebookTop {
    margin-top: -100px;
    height: 290px;
    background: rgba(34, 35, 50, 1);
    box-shadow: 0px 1Px 0px 0px rgba(0, 0, 0, 0.3);
    position: relative;
    .sellwell {
      position: absolute;
      top: 70px;
      padding: 0 32px;
      box-sizing: border-box;
      .bookList {
        height: 340px;
        display: flex;
        justify-content: space-between;
        .left {
          width: 200px;
          height: 260px;
          border-radius: 6px;
          margin-top: 40px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          width: 458px;
          height: 240px;
          margin-top: 60px;
          margin-left: 30px;
          // display: flex;
          // flex-direction: column;
          // justify-content: space-between;
          font-size: 26px;
          color: rgba(153, 153, 153, 1);
          .name {
            color: #fff;
            font-size: 32px;
            font-weight: 700;
          }
          .abstract {
            font-size: 26px;
            color: rgba(255, 122, 19, 1);
          }
          .pagenum {
            font-size: 26px;
            color: rgba(238, 238, 238, 1);
          }
        }
      }
    }
  }
  .ebookmes {
    font-size: 26px;
    color: rgba(85, 85, 85, 1);
    margin: 106px 32px 0px;
    // height: 220px;
    // border-bottom: 1Px solid #eee;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
  }
  .backg {
    background-color: #f9f9f9;
    .catalog {
      background-color: #fff;
      padding: 32px;
      box-sizing: border-box;
      .title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span {
          font-size: 26px;
          color: #999;
        }
        img {
          width: 25px;
          height: 25px;
        }
      }
      .more {
        line-height: 80px;
        color: #999;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }
    }
    .recommend {
      padding: 10px 32px;
      box-sizing: border-box;
      margin-top: 20px;
      background-color: #fff;
      .jiacu {
        font-weight: 700;
        &:after {
          background: #222;
        }
      }
      .bookList {
        height: 228px;
        border-bottom: 1Px solid #f6f6f6;
        display: flex;
        justify-content: flex-start;
        .left {
          width: 130px;
          height: 168px;
          border-radius: 6px;
          margin-top: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          width: 550px;
          //   height: 240px;
          margin-top: 15px;
          margin-left: 30px;

          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          font-size: 26px;
          color: rgba(153, 153, 153, 1);
          .name {
            color: #222;
            font-size: 28px;
          }
          .abstract {
            height: 80px;
            font-size: 26px;
            line-height: 40px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }
    }
  }
  .buyBtn {
    position: fixed;
    bottom: 0vh;
    left: 50%;
    width: 750px;
    height: 100px;
    margin-left: -375px;
    background: #fff;
    box-shadow: 0 -10px 10px #eee;
    display: flex;
    justify-content: space-between;
    align-self: center;
    .box {
      width: 350px;
      height: 100px;
      text-align: center;
      //   margin-left: 132px;
      line-height: 100px;
      color: #41d7bd;
    }
    .com_button {
      margin-top: 11px;
      margin-right: 32px;
    }
  }
}
</style>